<template>
  <!-- eslint-disable -->
  <div class="friendUrlDiv">
    <div class="topBtn">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddfriendUrl">新增友情链接</el-button>
    </div>
    <el-table v-loading="loading" :data="friendUrlList" style="width: 100%">
      <el-table-column align="center" prop="image" label="图片">
        <template slot-scope="{row}">
          <img :src="row.image" class="friendUrlImg" alt="">
        </template>
      </el-table-column>
      <el-table-column align="center" prop="title" width="200" label="友链名称">
        <template slot-scope="{row}">
          <div class="tableListTitle">{{ row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="external_url" label="外链">
        <template slot-scope="{row}">
          <span>{{ (row.external_url && row.external_url.length > 0) ? row.external_url : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="is_show" label="状态">
        <template slot-scope="{row}">
          <span>{{ row.is_show === 1 ? '显示' : '隐藏' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="weight" label="显示顺序" />
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-tooltip effect="dark" content="编辑" placement="top-start">
            <span class="btnIcon edit" @click="handleEditfriendUrl(row)"></span>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top-start">
            <span class="btnIcon delete" @click="handleDeletefriendUrl(row)"></span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page.sync="linkParams.page" 
      :page-sizes="[10,20,30,50]" 
      :page-size="linkParams.limit" 
      layout="prev, pager, next, total, sizes, jumper"
      :total="total" 
      style="margin-top: 30px;"
    />
  </div>
</template>

<script>
import { getLinksLists, deleteLinks } from '../../api/informationNetwork'
export default {
  data() {
    return {
      loading: false,
      linkParams: {
        page: 1,
        limit: 10
      },
      friendUrlList: [],
      total: null
    }
  },
  mounted() {
    this.getLinks()
  },
  methods: {
    // 获取友情链接列表
    getLinks() {
      this.loading = true
      getLinksLists(this.linkParams).then(res => {
        this.friendUrlList = res.data
        this.total = res.meta.total
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    },
    // 分页
    handleSizeChange(val) {
      this.linkParams.limit = val
      this.getLinks()
    },
    handleCurrentChange(val) {
      this.linkParams.page = val
      this.getLinks()
    },
    // 删除
    handleDeletefriendUrl(row) {
      this.$confirm('是否确认删除该轮播', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteLinks(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.linkParams.page = Math.ceil((this.total - 1) / this.linkParams.limit)
          this.getLinks()
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
      })
    },
    // 新增
    handleAddfriendUrl() {
      this.$router.push({ path: './friendUrl/add' })
    },
    // 修改
    handleEditfriendUrl(row) {
      this.$router.push({
        path: './friendUrl/edit',
        query: {
          data: JSON.stringify(row)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  $defaultColor: #0A2045;
  .btnIcon {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-right: 10px;
  }
  // 删除
  .delete {
    background: url('../../assets/btn/icon_delete.png') no-repeat center center;
  }
  .delete:hover {
    background: url('../../assets/btn/icon_delete_s.png') no-repeat center center;
  }
  // 查看
  .edit {
    background: url('../../assets/btn/icon_edit.png') no-repeat center center;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }
  // 标题头样式修改
  .el-table {
    color: $defaultColor;
    font-size: 14px;
    line-height: 19px;
    thead {
      color: $defaultColor;
      tr, th {
        background: #FAFAFB;
      }
    }
  }
  .friendUrlDiv {
    padding: 25px;
    .topBtn {
      width: 100%;
      text-align: right;
      margin-bottom: 30px;
    }
    .friendUrlImg {
      width: 60px;
      height: 60px;
    }
    .tableListTitle {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      -webkit-box-orient: vertical;
    }
  }
</style>
